<template>
  <el-dialog v-model="visible" :title="query?.title" width="1000" draggable :before-close="isClosed" :close-on-click-modal="false" append-to-body>
    <el-form label-width="auto" :model="formData" ref="formRef" :rules="pageData.simpleCostRules" :inline="true">
      <el-form-item label="订单处理成本：" prop="orderProcessingCost" style="width: 96%">
        <el-input v-model="formData.note[0]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.orderProcessingCost" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="运输费：" prop="transportationFee" style="width: 96%">
        <el-input v-model="formData.note[1]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.transportationFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="保险费：" prop="insuranceFee" style="width: 96%">
        <el-input v-model="formData.note[2]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.insuranceFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="通讯费：" prop="telephoneFee" style="width: 96%">
        <el-input v-model="formData.note[3]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.telephoneFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="检验费：" prop="inspectionFee" style="width: 96%">
        <el-input v-model="formData.note[4]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.inspectionFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="装卸费：" prop="loadingAndUnloadingFee" style="width: 96%">
        <el-input v-model="formData.note[5]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.loadingAndUnloadingFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="其他：" prop="otherFee" style="width: 96%">
        <el-input v-model="formData.note[6]" placeholder="请输入内容" :disabled="isDisabled">
            <template #prepend>
                <el-input-number v-model="formData.otherFee" controls-position="right" :disabled="isDisabled">
                    <template #suffix>
                        <span>元</span>
                    </template>
                </el-input-number>
            </template>
            <template #append>
                备注
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="合计成本：" prop="totalFee" style="width: 46%">
        <el-input placeholder="合计成本" v-model="formData.totalFee" :disabled="isDisabled">
            <template #append>
                元
            </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isClosed">取消</el-button>
        <el-button v-if="query?.type != 'viewCost'" type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs, ref, PropType, watch, computed } from 'vue'
import { costDetailsbyId, costAdd, costUpdate } from "../service/api"
import type { ComponentSize, FormInstance, FormRules} from 'element-plus'
import { ElMessage, ElMessageBox } from "element-plus";
import pageData from '../service/pageService'
export default defineComponent({
    name: 'Pagination',
    components: {
    },
    props: {
      query: {
        type: Object,
        default: () => ({})
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      getList:{
        type:Function,
        default: () => () => {}
      },
    },
    setup(props,{emit}) {
      const state = reactive({
        btnLoading: false,
        visible: false,
        dialogEditVisible: false,
        dialogbusinessVisible: false,
        formQuery: null,
        businessQuery: null,
        supplierId: null,
        businessId: null,
        idealNum: null,
        formData:{
          id:null,
          supplierName:null,
          product_name:null,
          orderProcessingCost: 0,
          transportationFee: 0,
          insuranceFee: 0,
          telephoneFee: 0,
          inspectionFee: 0,
          loadingAndUnloadingFee: 0,
          otherFee: 0,
          totalFee: 0,
          note:[],
        }
      })
      const formRef = ref<FormInstance>()
      const isClosed = () =>{
        state.visible = false
        emit('updateData', state.visible)
      }
      watch(() => props.dialogVisible, () => {
        state.visible = props.dialogVisible
        initData()
        console.log("query",props.query)
      })
      //监控总价变化
      watch(
        [
          () => state.formData.orderProcessingCost,
          () => state.formData.transportationFee,
          () => state.formData.insuranceFee,
          () => state.formData.telephoneFee,
          () => state.formData.inspectionFee,
          () => state.formData.loadingAndUnloadingFee,
          () => state.formData.otherFee,
        ],
        (newValues, oldValues) => {
        state.formData.totalFee = state.formData.orderProcessingCost + state.formData.transportationFee + state.formData.insuranceFee + state.formData.telephoneFee + state.formData.inspectionFee + state.formData.loadingAndUnloadingFee +  state.formData.otherFee
      })
      // 计算属性，根据 query.type 判断只读属性
      const isDisabled = computed(() => {
        return props.query?.type === "viewCost";
      });
      const initData = () => {
        state.supplierId = props.query?.supplierId
        state.businessId = props.query?.businessId
        if(props.query?.type == 'addCost') state.formData = JSON.parse(JSON.stringify(pageData.initCostformData))
        if(props.query?.type == 'editCost' || props.query?.type == 'viewCost') {
          costDetailsbyId(state.supplierId,state.businessId).then((res)=>{
            state.formData = res.data.data
            console.log("simplecost",res)
          }).catch((error) => {
            console.error('无法获取数据', error);
          });
        }
      }
      const handleComponent = (val , category) => {
        if(val == "add" && category == "supplier")
        {
          const data = {
            type:val,
            title:"供应商档案登记表"
          }
          state.formQuery = data
          state.dialogEditVisible = true
        }
        else if(val == "add" && category == "business")
        {
          const data = {
            type:val,
            title:"新增业务"
          }
          state.businessQuery = data
          state.dialogbusinessVisible = true
        }
      }
      const updateData = (val) =>{
        state.dialogEditVisible = val
        state.dialogbusinessVisible = val
      }
      const submit = () => {
        state.formData.supplierName = props.query?.supplierName
        state.formData.product_name = props.query?.product_name
        formRef.value.validate((valid) => {
          console.log("valid",valid)
          if (valid) { 
              // 验证通过
            if(props.query.type == 'editCost'){
              state.formData.noteJson = JSON.stringify(state.formData.note)
              costUpdate(state.supplierId,state.businessId,state.formData).then((res)=>{
                ElMessage.success("保存成功！")
                props.getList()
                isClosed(); // 关闭弹窗
                state.btnLoading = false
              })
            }else if(props.query.type == 'addCost'){
              state.formData.noteJson = JSON.stringify(state.formData.note);
              costAdd(state.businessId, state.supplierId, state.formData).then((res)=>{
                ElMessage.success("保存成功！")
                props.getList()
                isClosed(); // 关闭弹窗
                state.btnLoading = false
              })
            }
          }
          else {
            ElMessage.error('请完成必填字段')
          }
        })
      }
      onBeforeMount(() => {
        //state.visible = props.dialogVisible
      })
      return {
        ...toRefs(state),
        isClosed,
        formRef,
        pageData,
        submit,
        handleComponent,
        updateData,
        isDisabled
      }
    }
})
</script>
<style scoped>
.layout{
    width: auto;
    height: 800px;
    background-color: #FFFFFF;
}

</style>
  